<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box {
				/*		width: 300px;*/
				height: 200px;
				background-color: red;
			}
			
			.box1 {
				width: 300px;
				height: 200px;
				background-color: green;
			}
			
			span {
				width: 300px;
				height: 200px;
				background-color: gold;
			}
			
			ul {
				list-style: none;
			}
			
			ul li {
				float: left;
				margin-left: 30px;
			}
			
			ol {
				clear: both;
			}
		</style>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
	</head>

	<body>
		<!--div是属于块级元素 独占一行-->
		<div class="box">
			ddddddddd
		</div>
		<div class="box1">
			ddddddddd
		</div>
		<!--行内元素-->
		<span >span</span>
		<span >span</span>
		<span >span</span>

		<ul>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
	<!--	<br />-->
		<ol>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
		
		<div id="box">
			
		</div>
	</body>

</html>